<template>
  <div>
    <div class="header">
      <van-nav-bar
        title="订单信息"
        left-text="返回首页"
        left-arrow
        @click-left="$router.push('/my')"
      >
        <template #left>
          <van-icon name="arrow-left" size="25" color="black" />
        </template>
        <template #right> </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <div class="nothing" v-show="empty">
        <van-empty
          class="custom-image"
          image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无订单"
        />
      </div>
    </div>
    <div class="bottom" v-show="!empty">
      <div class="bottom-one" @click="getOrid">当前订单</div>
      <div class="bottom-two" @click="getOridAll">全部订单</div>
    </div>
    <div class="btm" v-for="(item, index) in OridlistAll" :key="index" v-show="!fag">
      <div class="btmone">
        <img :src="item.img1" alt="" />
      </div>
      <div class="btmtwo">
        <p>{{ item.proname }}</p>
      </div>
    </div>
    <div class="btm" v-show="fag">
      <div class="btmone">
        <img src="" alt="" />
      </div>
      <div class="btmtwo">
        <p>111</p>
      </div>
    </div>
  </div>
</template>

<script>
import { getOrdList, getOrdListAll } from "./../../api/detail";
export default {
  data() {
    return {
      empty: true,
      OridlistAll: [],
      fag:true
    };
  },
  created() {
    //判断用户是否登录
    if (!localStorage.getItem("token")) {
      this.empty = true;
    } else {
      this.empty = false;
    }
  },
  methods: {
    getOrid() {
      this.fag=true
      //发送获取订单请求
      getOrdList({
        userid: localStorage.getItem("userid"),
        time: localStorage.getItem("time"),
      }).then((res) => {
        console.log(res);
      });
    },
    //发送获取全部订单请求
    getOridAll() {
      this.fag=false
      getOrdListAll({ userid: localStorage.getItem("userid") }).then((res) => {
        // console.log(res.data.data.data);
        this.OridlistAll = res.data.data;
        
      });
    },
  },
};
</script>

<style scoped>
.bottom {
  display: flex;
  justify-content: space-around;
  text-align: center;
  line-height: 0.5rem;
  background-color: #ccc;
  width: 97%;
  margin: auto;
}
.bottom .bottom-one {
  width: 1.2rem;
  height: 0.5rem;
  background-color: pink;
  border-radius: 0.2rem;
}
.bottom .bottom-two {
  width: 1.2rem;
  height: 0.5rem;
  background-color: pink;
  border-radius: 0.2rem;
}
.btm {
  height: 1rem;
  background-color: #ccc;
  display: flex;
  width: 97%;
  margin: auto;
  margin-top: 5px;
}
.btm .btmone {
  width: 35%;
}
.btm .btmtwo {
  flex: 1;
}
.btm img{
  width: 100%;
  height: 100%;
}
</style>